$(function(){
    let small = $('.img'),
        movebox = $('.movebox'),
        big = $('.big'),
        bigImg =$('.big>.big2>img');

    //  1.鼠标悬停事件
    small.on('mouseenter',function(){
   

    movebox.addClass('show');
    big.addClass('show');

     // 3. 设置movebox大小
    //  movebox.css({
    //     width: small.width() * big.width() / bigImg.width() + 'px',
    //     height: small.height() * big.height() / bigImg.height() + 'px',
    // });
    
    small.on('mousemove',function(ev){
       
    let top = ev.pageY - movebox.height() / 2 ;
    let left = ev.pageX - movebox.width() / 2;

    let ratio = bigImg.width()/ small.width();

    // 边界
    if(top<=0){
        top=0;
    }else if(top>= small.height() - movebox.height()){
         top=small.height - movebox.height();
    };

    if(left<=0){
       left=0;
    }else if(left>=small.width() - movebox.width()){
              left=small.width() - movebox.width();
        };
    

    movebox.css({
        top:top+'px',
        left:left+'px'
    });


    bigImg.css({
        top: top * -1 + 'px',
        left: left * -1 + 'px'
    });
    });
   });

    small.on('mouseleave',function(){
    movebox.removeClass('show');
    big.removeClass('show');
        
    })

    // 设置movebox大小
    

    //  让movebox跟随鼠标移动

    // small.on('mousemove',function(ev){

    // let top = ev.pageY - movebox.height()/2;
    // let left = ev.pageX - movebox.widch()/2;

    // })

});